<template>
  <div>
    <header :class="['header', nonePos ? 'header__nonePos' : '', noneBg ? 'header__noneBg' : '']">
        <div class="header-back" @click="handleBack" v-if="!noneBack">
            <img v-if="whiteBack" src="@/assets/img/icon_back2.png" alt="">
            <img src="@/assets/img/icon_back.png" alt="" v-else>
        </div>
        <h1 class="header-title">
            {{title}}
        </h1>
        <div class="header-right">
            <div @click="handleLogout" v-if="right === 'logout'">
                退出
            </div>
        </div>
    </header>
    <div class="place"></div>
  </div>
</template>

<script>
import api from '@/api'
import Cookies from 'js-cookie'; //引入cookie操作依赖
export default {
  name: 'appHead',
  props: {
    title: {
      type: String,
      default: '标题'
    },
    right: {
      type: String,
      default: ''
    },
    noneBack: {
      type: Boolean,
      default: false
    },
    nonePos: {
      type: Boolean,
      default: false
    },
    noneBg: {
      type: Boolean,
      default: false
    },
    whiteBack: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
    }
  },
  methods: {
    handleBack () {
      this.$router.go(-1)
    },
    handleLogout () {
      let _self = this
      this.$confirm({
        desc: '是否退出登录？',
        btnText: {
          cancel: '否',
          confirm: '是'
        },
        success: function () {

          var getDomain = (host) => {
            host = host.split(':')[0]
            return isNaN(host.substring(host.lastIndexOf('.'))) ? host.substring(host.substring(0, host.lastIndexOf('.')).lastIndexOf('.') + 1) : host
          }

          let domain =  '.'+ getDomain(location.host)

          console.log(domain)

          _self.$store.state.confirm.visible = false

          HuoSdk && HuoSdk.logout()

          window.localStorage.removeItem('user_token')
          window.sessionStorage.removeItem('user_token')
          window.sessionStorage.removeItem('huosdk_HS-Token')
          window.localStorage.removeItem('huosdk_HS-Token')

          // api.userLogout(res => {})

          document.cookie = 'HUOSHUID=; max-age=0;domain='+domain
          _self.$router.push('/')

          Cookies.remove('HUOSHUID', { path: '/' }) // removed!
        },
        cancel: function () {
          _self.$store.state.confirm.visible = false
        }
      })
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
.place {
  height: 0.5rem;
}

    .header {
        background-color: #ffffff;
        width: 100%;
        height: 0.5rem;
        left: 0;
        position: absolute;
        top: 0;
        z-index: 9;
        box-shadow: 0px 0.01rem 0.03rem 0px rgba(0,0,0,0.1);
        margin-top: 0;
        &-back,&-right {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 0.5rem;
            top: 0;
        }
        &-back {
            left: 0.15rem;
            img {
                height: 0.18rem;
            }
        }
        &-title {
            line-height: 0.5rem;
            color: #000000;
            font-weight: 600;
            font-size: 0.18rem;
            text-align: center;
        }
        &-right {
            right: 0.15rem;
            color: #666666;
            font-size: 0.13rem;
        }
    }

    .header__nonePos {
        position: absolute;
        /*top: 0;*/
    }

    .header__noneBg {
        background-color: transparent;
        box-shadow: none;
        .header-title {
            color: #ffffff;
        }
        .header-right {
            color: #ffffff;
        }
    }

</style>
